<template>
  <div class="blog-list">
    <el-card v-for="blog in blogs" :key="blog.id" class="blog-item" @click="handleClick(blog.id)">
      <div class="blog-header">
        <h2 class="blog-title">{{ blog.title }}</h2>
        <div class="blog-meta">
          <span class="author">{{ blog.author }}</span>
          <span class="time">{{ blog.createTime }}</span>
          <span class="views">阅读 {{ blog.views }}</span>
        </div>
      </div>
      <div class="blog-content">{{ blog.summary }}</div>
      <div class="blog-footer">
        <div class="tags">
          <el-tag v-for="tag in blog.tags" :key="tag" size="small">{{ tag }}</el-tag>
        </div>
        <div class="actions">
          <el-button type="text" size="small">
            <el-icon>
              <StarFilled />
            </el-icon>
            {{ blog.agrees }}
          </el-button>
          <el-button type="text" size="small">
            <el-icon>
              <ChatRound />
            </el-icon>
            {{ blog.comments }}
          </el-button>
        </div>
      </div>
    </el-card>

    <el-empty v-if="!loading && blogs.length === 0" description="暂无数据" />
    <el-skeleton v-if="loading" :rows="3" animated />
  </div>
</template>

<script setup>
import { StarFilled, ChatRound } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { useBlogStore } from "@/stores/blog";
import { onMounted, ref } from "vue";
import { computed } from "vue";
const router = useRouter();
let loading = ref(true);
const blogStore = useBlogStore();
const blogs = computed(() => blogStore.blogData.list);
const searchEmpty = async () => {
  await blogStore.initializeEmptySearch();
  loading.value = false;
};

const handleClick = id => {
  router.push(`/blog/${id}`);
};

onMounted(() => {
  searchEmpty();
});
</script>

<style scoped>
.blog-list {
  background: #fff;
  border-radius: 4px;
}

.blog-item {
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.blog-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.blog-header {
  margin-bottom: 12px;
}

.blog-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 500;
}

.blog-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #666;
}

.blog-content {
  margin-bottom: 16px;
  color: #666;
  line-height: 1.6;
}

.blog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tags {
  display: flex;
  gap: 8px;
}

.actions {
  display: flex;
  gap: 16px;
}
</style>